<template>
  <div class="wrap">
    <img class="header" src="@assets/images/apply_bg.jpeg" alt="" />
    <div class="container">
      <ul class="apply-form">
        <li class="apply-option van-hairline--surround">
          <van-field v-model="nickname" type="text" placeholder="请输入申请人姓名" maxlength="10">
            <template slot="left-icon">
              <img class="icon" width="14" src="@assets/images/icon_user.png" alt="" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround">
          <van-field v-model="company" type="text" placeholder="请输入公司名" maxlength="30">
            <template slot="left-icon">
              <img class="icon" width="16" src="@assets/images/icon_company.png" alt="" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround">
          <van-field v-model="phone" type="tel" placeholder="请输入您的手机号码" maxlength="11">
            <template slot="left-icon">
              <img class="icon" width="12" src="@assets/images/icon_phone.png" alt="" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround" v-if="shareId">
          <van-field v-model.trim="smsCode" maxlength="6" type="number" placeholder="请输入验证码">
            <template slot="left-icon">
              <img class="icon" width="13" src="@assets/images/yzm.png" alt="" />
            </template>
            <template #button>
              <SmsBtn class="sms-btn van-hairline--left" color="#FE9100" plain size="small" :border="false" :phone="phone" />
            </template>
          </van-field>
        </li>
        <li class="apply-option van-hairline--surround">
          <van-field v-model="province.name" type="text" placeholder="请选择省份" @click="showPicker = true" readonly clickable is-link />
        </li>
      </ul>
      <van-button class="submit-btn" type="info" block @click="apply" color="#FE9100" round>提 交</van-button>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker title="选择城市" value-key="name" show-toolbar :columns="provinceList" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import { Button, Field, Toast, Picker, Popup } from 'vant';
import { sysConfig_getSysConfigList, order_saveOrder, order_saveShareOrder } from '@api/service';
import SmsBtn from '@components/smsBtn';

export default {
  data() {
    return {
      shareId: this.$route.query.shareId,
      showPicker: false,
      phone: '',
      nickname: '',
      company: '',
      smsCode: '',
      provinceList: [],
      province: {} // 选中贷province
    };
  },
  mounted() {
    this.phone = this.userInfo.phone;
    this.nickname = this.userInfo.nickname;
    this.company = this.userInfo.company;
    this.getProvinceList();
  },
  methods: {
    onConfirm(value) {
      this.province = value;
      this.showPicker = false;
    },
    async getProvinceList() {
      let res = await sysConfig_getSysConfigList({ key: 'weiBankUrl' });
      if (res.code === 200) {
        this.provinceList = res.data;
      } else {
        Toast(res.msg);
      }
    },
    async apply() {
      const { nickname, phone, province, company, smsCode, shareId } = this;
      if (!nickname) {
        return Toast('请输入申请人姓名');
      } else if (!company) {
        return Toast('请输入公司名');
      } else if (!phone) {
        return Toast('请输入您的手机号');
      } else if (!/^1[3456789]\d{9}$/.test(phone)) {
        return Toast('请输入正确的手机号');
      } else if (!smsCode && shareId) {
        return Toast('请输入验证码');
      } else if (!province.name) {
        return Toast('请选择城市');
      }
      let res = null;
      if (shareId) {
        res = await order_saveShareOrder({ json: 1, shareId, smsCode, productId: this.$route.query.id, phone, company, nickname });
      } else {
        res = await order_saveOrder({ json: 1, productId: this.$route.query.id, phone, company, nickname });
      }
      if (res.code === 200) {
        window.location.href = province.value;
      } else {
        Toast(res.msg);
      }
    }
  },
  components: {
    'van-button': Button,
    'van-picker': Picker,
    'van-field': Field,
    'van-popup': Popup,
    SmsBtn
  }
};
</script>

<style lang="scss" scoped>
/deep/ .van-picker__confirm {
  color: #fe9100 !important;
}
.wrap {
  background: #fff;
  overflow: hidden;
}
.header {
  display: block;
  width: 100%;
  height: 226px;
}
.container {
  overflow: hidden;
  width: 686px;
  min-height: calc(100vh - 330px);
  margin: 45px auto;
  background: #fff;
  box-shadow: 0px 5px 22px 0px rgba(41, 47, 61, 0.1);
  border-radius: 18px;
  padding: 0 50px 25px;
  box-sizing: border-box;
}
.apply-form {
  margin-top: 50px;
}
.apply-option {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .van-cell {
    align-items: center;
  }
  .icon {
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
  &:last-child {
    margin-bottom: 100px;
  }
  &:after {
    border-radius: 88px;
    border-color: #dddddd;
  }
}
.sms-btn {
  font-size: 28px;
  margin-right: -24px;
}
.submit-btn {
  font-size: 32px;
  font-weight: bold;
}
</style>
